<template>
	<view>
		<view class="header-box">
			<topTabBar :tabbarTitle="'我的收益'"></topTabBar>
			<view class="header-box-1">{{userInfo.money}}</view>
			<view class="header-box-2">累计收益（元）</view>
		</view>
		<view class="income-title">
			收益记录
		</view>
		<noData v-if="lists.length < 1" type="1" ndText="暂无收益"></noData>
		<view v-else class="integral-item" v-for="(item,index) in lists" :key="index">
			<view class="integral-item-left">
				<view class="name">￥<text v-show="Number(item.money) > 0">+</text>{{item.money}}</view>
			</view>
			<view class="integral-item-right" @click="navigator('/pages/me/incomeDetail/incomeDetail?incomeDetail='+JSON.stringify(item))">查看详情</view>
		</view>
	</view>
</template>

<script>
	import noData from '@/components/no-data.vue';
	import topTabBar from '@/components/topTabBar.vue';
	export default {
		components: {
			topTabBar,
			noData
		},
		data() {
			return {
				lists:[],
				userInfo:{}
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				this.$http('user.getuserdetails', {}, '获取中...').then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					}
				})
				this.$http('other.getMoneyLog', {}, '获取中...').then(res => {
					if (res.code == 1) {
						this.lists = res.data.data
					}
				})
			},
			navigator(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F7F9;
	}

	.header-box {
		width: 100%;
		height: 235rpx;
		background-image: url('');
		background-size: contain;
		background-repeat: no-repeat;
		padding-top: 100rpx;
		position: relative;
		.header-box-1 {
			font-weight: bold;
			font-size: 48rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 50rpx;
		}
		
		.header-box-2 {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 20rpx;
		}
	}
	.income-title{
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin: 20rpx 0 20rpx 20rpx;
	}
	.integral-item{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #EEEEEE;
		background-color: #FFFFFF;
		.integral-item-left{
			.name{
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-top: 10rpx;
			}
		}
		.integral-item-right{
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin-top: 10rpx;
		}
	}
</style>